<template>
	<view class="show-car__-content">
		<view class="top" :style="(isPage && commodityList.length == 0) ? 'background: #FFFFFF;':'background: #FAFAFA;'">
			<view class="top-left">共<text>{{carTotal}}</text>件商品</view>
			<view class="top-right" @tap="editCom = true" v-if="editCom == false">编辑</view>
			<view class="top-right" @tap="editCom = false" v-else>完成</view>
		</view>
		<view class="none" v-if="isPage && commodityList.length == 0">
			<image src="/static/img/quesheng.png" mode="widthFix"></image>
			<view>购物车是空的，快<text @tap="gotoIndex">去挑选</text>好物吧~</view>
		</view>
		<scroll-view scroll-y="true" class="commodity-content" v-else>
			<view class="commodity-amount" v-for="(val,index) in commodityList" :key="index">
				<radio color="#E6B873" @tap="handelRadio(index)" :checked="val.checked"></radio>
				<image :src="val.spec_price.path"></image>
				<view class="message-content">
					<view class="title">{{val.goods.goods_name}}</view>
					<view class="small-title">{{val.goods.goods_subname}}</view>
					<view class="price-amount">
						<view class="price">￥{{val.spec_price.cost}}</view>
						<view class="minus iconfont iconiconless" @tap="handelCount(index,'reduce')"></view>
						<input type="number" class="count-number" @input="handelInput($event,index)" v-model="val.num"></input>
						<view class="add iconfont iconjia" @tap="handelCount(index,'plus')"></view>
					</view>
				</view>
			</view>
			<uni-load-more v-if="commodityList.length >= 8" :status="status" :content-text="contentText" />
		</scroll-view>
		<view class="footer-content">
			<view class="all-change">
				<label class="radio-title" @tap="selAllCom">
					<radio color="#E6B873" :checked="selAll"></radio>全选（{{selCount}}）
				</label>
			</view>
			<view class="all-btn">
				<view v-if="editCom == false" class="price-all">￥{{selPrice}}</view>
				<view v-if="editCom == false" class="closing-btn" @tap="closing">结算</view>
				<view v-if="editCom == true" class="closing-btn del-btn" @tap="deelSel">删除</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				editCom: false, //是否为编辑
				selCount: 0, //已选商品数量
				selPrice: 0, //已选商品总价
				selAll: false, //是否全选
				carTotal: 0, //购物车商品数量
				commodityList: [], //购物车列表
				page: 1,
				reload: true,
				isPage: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多',
					contentnot: "没数据"
				}
			}
		},
		onShow() {
			this.getShopCar();
		},
		methods: {
			// 获取购物车列表
			getShopCar() {
				this.$shopApi.apiPost('font/car/infos', {page: this.page}).then(res => {
					if (res.data.code == 200 && res.data.data.list && res.data.data.list.length > 0) {
						var list = res.data.data.list;
						list.forEach(item => {
							item['checked'] = false;
						})
						this.$forceUpdate();
						this.carTotal = res.data.data.total;
						this.commodityList = this.reload ? list : this.commodityList.concat(list);
						this.reload = false;
						this.status = 'more';
					} else {
						if (this.reload) {
							this.commodityList = [];
							this.isPage = true;
						} else {
							this.status = 'noMore';
						}
					}
				})
			},
			// 前往首页
			gotoIndex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 加减商品
			handelCount(index, state) {
				if (this.commodityList[index].count == 1 && state == 'reduce') {
					return
				} else {
					var num = Number(this.commodityList[index].count);
					if (state == 'reduce') {
						num--;
					} else {
						num++;
					}
					this.editCarNum(index,num);
				}
			},
			// 用户输入自定义数量
			handelInput(e, index) {
				var num = Number(e.detail.value);
				if ((num && num < 1) || !num) {
					num = 1;
				}
				this.editCarNum(index,num);
			},
			// 计算总价及所有已选商品总数
			coumputedCommodity() {
				this.selCount = 0
				this.selPrice = 0
				let bol = true
				this.commodityList.forEach(val => {
					if (val.checked) {
						this.selCount += Number(val.count)
						this.selPrice += (val.price * Number(val.count))
					} else {
						bol = false
					}
				})
				this.selAll = bol
			},
			// 编辑购物车信息
			editCarNum(index,num) {
				var data = {
					unid: this.commodityList[index].unid,
					num: num
				}
				this.$shopApi.apiPost('font/car/save', data).then(res => {
					if (res.data.code == 200) {
						this.commodityList[index].num = num;
						this.$forceUpdate();
						this.coumputedCommodity()
					}
				})
			},
			// 是否选中商品
			handelRadio(index) {
				this.commodityList[index].checked = !this.commodityList[index].checked;
				this.$forceUpdate();
				this.coumputedCommodity()
			},
			// 全选&取消全选
			selAllCom() {
				this.selAll = !this.selAll
				this.commodityList.forEach(val => {
					val.checked = this.selAll
				})
				this.$forceUpdate();
				this.coumputedCommodity()
			},
			// 删除选中商品
			deelSel() {
				var _this = this;
				let arr = []
				this.commodityList.forEach(val => {
					if (val.checked) {
						arr.push(val.unid)
					}
				})
				uni.showModal({
					content: '是否将这' + this.selCount + '件商品删除?',
					cancelText: '我再想想',
					cancelColor: '#D9D9D9',
					confirmText: '删除',
					confirmColor: '#F3581D',
					success: (res) => {
						if (res.confirm) {
							_this.$shopApi.apiPost('font/car/delete', {unid: arr}).then(res => {
								_this.util.showDialog(res.data.message);
								if (res.data.code == 200) {
									for (var i = _this.commodityList.length - 1; i >= 0; i--) {
										arr.forEach(item => {
											if (_this.commodityList[i].unid == item) {
												_this.commodityList.splice(i, 1);
											}
										})
									}
									_this.$forceUpdate();
									_this.coumputedCommodity()
								}
							})
						}
					}
				})
			},
			// 结算
			closing() {
				console.log('结算');
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("/static/css/order.css");
	page {
		height: 100%;
	}

	.show-car__-content {
		height: 100%;

		.commodity-content {
			margin: 90upx auto 100upx;
			background: #FAFAFA;

			.commodity-amount {
				background-color: #FFFFFF;
				margin-bottom: 20upx;
				padding: 30upx;
				display: flex;

				radio {
					line-height: 160upx;
				}

				image {
					width: 160upx;
					height: 160upx;
					background-color: #F5F3F4;
					border-radius: 10upx;
				}

				.message-content {
					width: 450upx;
					margin-left: 30upx;

					.title {
						font-size: 26upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						line-height: 38upx;
						color: #333333;
						opacity: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
					}

					.small-title {
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						line-height: 34upx;
						color: #999999;
						opacity: 1;
						margin-top: 20upx;
					}

					.price-amount {
						display: flex;
						margin-top: 20upx;

						.price {
							font-size: 32upx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							line-height: 48upx;
							color: #E43841;
							opacity: 1;
						}

						.old-price {
							font-size: 24upx;
							color: #999999;
						}

						.minus,
						.add {
							width: 36upx;
							height: 36upx;
							line-height: 36upx;
							border-radius: 18upx;
							font-size: 36upx;
							font-weight: bold;
							text-align: center;
							color: #E7E7E7;
							font-size: 36upx;
						}

						.minus {
							margin-left: auto;
						}

						.count-number {
							width: 90upx;
							padding: 0;
							margin: 0;
							height: 36upx;
							line-height: 36upx;
							box-sizing: border-box;
							text-align: center;
							font-size: 24upx;
							color: #333333;
						}

						.add {
							color: #E6B873;
						}
					}
				}
			}
		}
	}
</style>
